import React, { useState } from 'react'
import {
  createViewState,
} from '@jbrowse/react-linear-genome-view'
import Plugin from '@jbrowse/core/Plugin'
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,  Select, Space,Form,Upload,Input} from 'antd';
import assembly from './GetAssembly'
import tracks from './tracks'
import JBItem from './JBrowseItem';
import { useLocation } from 'react-router-dom';
import configuration from './configuration'
import plugins from './plugins'
import FormItem from 'antd/es/form/FormItem';
import option from './AssemblyName';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}
const JBView = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const [AssemblyID , setAssemblyID] = useState('')
  const [AssemblyName , setAssemblyName] = useState('')
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const kronaSpecise = queryParams.get('kronaSpecise');
  const [state, setState] = useState([createViewState({
    assembly,
    tracks,
    configuration,
    // location: '1:124,624,904..124,625,635',
  })])
  const handleSubmit = (e) => {
    setIsModalOpen(false);
  }
  const onFinish = (values) => {
      setState([...state,createViewState({
        assembly:{  
          name: AssemblyName,
          sequence: {
            type: "ReferenceSequenceTrack",
            trackId: AssemblyID,
            adapter: {
              type: "BgzipFastaAdapter",
              fastaLocation: {
                uri: "/data"+"/"+AssemblyName+"/"+AssemblyID,
                locationType: "UriLocation"
              },
              faiLocation: {
                uri: "/data"+"/"+AssemblyName+"/"+AssemblyID+".fai",
                locationType: "UriLocation"
              },
              gziLocation: {
                uri: "/data"+"/"+AssemblyName+"/"+AssemblyID+".gzi",
                locationType: "UriLocation"
              }
            }
          },
          tracks:[
            {
                type: 'FeatureTrack',
                trackId: 'genes',
                name: 'NCBI RefSeq Genes',
                assemblyNames: [AssemblyName],
                category: ['Genes'],
                adapter: {
                  type: 'Gff3TabixAdapter',
                  gffGzLocation: {
                    uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz',
                  },
                  index: {
                    location: {
                      uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.tbi',
                    },
                  },
                },
              }
          ]
        },
        configuration,  
      })])
    setIsModalOpen(false);
  }
  console.log(tracks)
  const remove = (index) => {
    const list = [...state]
    list.splice(index,1)
    if (list.length === 0) {
      alert('已经是最后一个组件了！！！')
      return
    }
    setState(list)
  }
  const onChangeAssembly = (value ,option) => {
    setAssemblyID(value)
    setAssemblyName(option.label)
  }
  const onSearchAssembly = (value) => {
  }
  return (
        <Space direction="vertical" style={{width: '100%',}}>
        <Button  onClick={showModal} style={antbtn}>Add JBrowseDom</Button>
        <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} 
              cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
              okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
        >
        <Spin spinning={loading}>  
              <Form onSubmit={handleSubmit}
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={onFinish}
                    style={{
                      maxWidth: 600,
                    }}

                  >
                <FormItem  name="Assembly" label="Assembly">
                <Select
                  showSearch
                  placeholder="Select a person"
                  optionFilterProp="children"
                  onChange={onChangeAssembly}
                  filterOption={(input, option) =>
                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                  }
                >
                  {option.map((option) => (
                    <Option key={option.value} value={option.value} label={option.label}>
                      {option.label}
                    </Option>
                  ))}
                </Select>

                </FormItem>

                <Form.Item
                      wrapperCol={{
                        span: 12,
                        offset: 6,
                      }}
                    >
                      <Button type="primary" htmlType="submit" >
                        Submit
                      </Button>
                    </Form.Item>
                </Form></Spin>
        </Modal>
            {state.map((item,index) => {
              return (
                <div key={index}>
                  <JBItem content={item} />
                  <Button  onClick={() => remove(index)}  block>Delete</Button>
                </div>
              )
            })}
        </Space>
  );
}

export default JBView;
